const path = require('path'),
      wp   = require('webpack');

module.exports = {
    entry: {
        idx: './src/idx.js'
    },
    output: {
        path: path.resolve(__dirname, './dist/'),
        filename: '[name].m.js',
        publicPath: '/dist/'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [{
                    loader: 'style-loader',
                    options: {
                        // css的SourceMap 想开启除了devtool还有每个处理css的loader都要加下面这个参数。开启后就可以看到对应的行号什么的了。
                        sourceMap: true
                    }
                },{
                    loader: 'css-loader',
                    options: {
                        sourceMap: true
                    }
                }]
            },{
                // ESlint 做完这个配置一定要建eslint的规则配置否则报错 No ESLint configuration found
                test: /\.js$/,
                // 保证处理自己写而非三方的
                include: [path.resolve(__dirname, './src/')],
                exclude: [path.resolve(__dirname, './src/lib')],
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                },{
                    loader: 'eslint-loader',
                    options: {
                        // 使用我们安装的eslit formatter 它可以更友好的标注出哪里有问题。
                        formatter: require('eslint-friendly-formatter')
                    }
                }]
            }
        ]
    }
    ,
    devServer: {
        // inline: false, // 当inline 置为false 打包过程放在页面头部，true放在console log 中  https://segmentfault.com/a/1190000014141798
        host: '0.0.0.0',
        port: '9077',
        //historyApiFallback: { // 防止H5 方式 404页面。
            // rewrite 规则 如果只是简单的防止404这里直接可以设置为true
            // historyApiFallback: true 无需配置
        //}
        // historyApiFallback: true, // 任意路径被重定向index.html
        // 高级用法
        // historyApiFallback 这个引用了一个三方的包 connect-history-api-fallback
        historyApiFallback: {
            rewrites: [
                // 数组中的每一项是一个规则
                {
                    // 这里可以用字符串也可以用正则 https://www.npmjs.com/package/connect-history-api-fallback
                    from: /.*?/, // 从一个确定的url 
                    to: function(context){
                        console.log(context.match);
                        return '/index.html'
                    } // 导向为本地一个确定的页面
                }
            ]
        },
        // proxy 代理远程接口请求 它用的是http-proxy-middleware https://www.npmjs.com/package/http-proxy-middleware
        //proxy: []
        //proxy: {}
        // options
        /**
         * @param target 指定代理地址，代理到哪里去。
         * @param changeOrigin 改变你的源到你的url 目标是虚拟主机VirtualHost需要配置此项，否则不成功。默认值是false, 需要开启设为true
         * @param headers 增加请求头,给代理增加请求头。比如加cookie等等ua等等
         * @param logLevel 帮助调试的，在命令行控制台显示代理的情况。
         * @param pathRewrite 和historyApiFallback rewrites 差不多，只不过这个是用来接口重定向的。使用场景非常长的链接用短的重定向到长的。
         * 
         */
        /* 方式一
        {//建芳
                context: ["/capitalCount", "/withdraw","/recharge","/authenLog","/centerCapitalExp","/withdrawRecord", "/withdrawRecord", "/settlement", "/marketTrade","/marketMergeTrade","/entrustRecord","/planEntrustRecord","/centerCapitalDaily","/centerCapitalSum","/userPaymentTradeCount","/userBaseOperCount","/userPositionCount","/userPositionCount","/mars","/smallAutoPayRecord","/smallPayTask","/feeProfit","/capitalUse", "/userCapital","/accountManage",'/blacklist',"/batchEntrust", "/news","/brush","/capitalaccount","/authentication","/billDetail","/SysDictionary","/app","/gbcreportmod","/backcapital",'/walletBill','/walletBillDetail','/walletBalance',"/msg","/integralBill","/integralRule","/integralVipRule","/googleVerify","/phoneVerify","/messageSend","/msgTemplateRule","/operInfo","/agencyTask",'/rechargeAddress','/withdrawAddress',"/dealRecord","/capitalMonitor","/SendEmailAccount","/voteManage","/drawManage","/userInfo","/sys","/loginInfo","/common","/usermod",'/walletRecon'],
                target:"http://192.168.3.3:8081",
                secure: false,
                changeOrigin: true
            }
        */
       // 方式二
       proxy: {
           '/bd': {
               target: "https://t.bitglobal.com/",
               changeOrigin: true, // 如果接口返回500 加上这个试试
               // 设置loglevel可以看到代理的信息
               logLevel: 'debug',
               // 重定向 当匹配规则后 会将匹配的 target+重定向的+正则捕获组。
               pathRewrite: {
                   '^/bd(.*)': '/getExchangeRate$1'
               },
               // 访问https的接口需要设置
               https: true,
               // 加headers 如何访问需要登录的后的接口，无法呼就是加个token cookie 等，可以先登录进去随意找个简单接口找出发送的cookie token，然后在header中设置，虽然cookie有时效性，但是调试够了。
               headers: {
                    // 'Cookie': '剪贴我们需要的cookie'
                    'Cookie': 's=1'
               }               

           }
       },
       // 开启模块热更新
       hot: true,
       // 无论如何也不触发全局的浏览器刷新,当设置这个浏览器就不刷新了有更新也不刷新页面了。
       hotOnly: true,



        // 开启overlay 后eslint的报错会显示在浏览器上。
        overlay: true
    },
    plugins: [
        // 如果工具、loader自带热更新完成hot 和这里就可以了
        new wp.HotModuleReplacementPlugin(),
        new wp.NamedModulesPlugin()
    ],
    
    

    // Source Map
    // devtool: 'eval' // 编译和重新编译速度比较快 通过控制台的日志输出会包含文件行号，查看 除了本身的代码还会有webpack的代码。调整生成的质量，调整此参数。
    // devtool: 'source-map' // 当使用source-map的时候发现webpack那堆代码扔了，更好的体验了。再加上debug完美了就是速度慢点。浏览器中的文件和本地源文件基本一样了。
    // 有这么多怎么选值，打包速度，代码调试清晰度去衡量，有一点损耗性能又能有提示的。
    // 开发 cheap-module-source-map 比较不错 刚开始编译慢，后面再次编译会比较快。
    // 线上建议 source-map
    devtool: 'cheap-module-source-map',

} 
